---
export interface Props {
  title: string;
  value: string | number;
  subtitle?: string;
  icon?: string;
  color?: string;
  gradient?: {
    from: string;
    to: string;
  };
  size?: 'small' | 'medium' | 'large';
  trend?: {
    value: number;
    isPositive: boolean;
    label?: string;
  };
  link?: {
    url: string;
    text: string;
  };
}

const { 
  title, 
  value, 
  subtitle, 
  icon, 
  color = '#3B82F6', 
  gradient,
  size = 'medium',
  trend,
  link
} = Astro.props;

// 尺寸样式映射
const getSizeClasses = (size: string) => {
  switch (size) {
    case 'small':
      return {
        container: 'p-3',
        value: 'text-xl',
        title: 'text-xs',
        subtitle: 'text-xs',
        icon: 'text-lg',
        iconContainer: 'w-8 h-8'
      };
    case 'large':
      return {
        container: 'p-6',
        value: 'text-4xl',
        title: 'text-base',
        subtitle: 'text-sm',
        icon: 'text-2xl',
        iconContainer: 'w-12 h-12'
      };
    default: // medium
      return {
        container: 'p-4',
        value: 'text-2xl',
        title: 'text-sm',
        subtitle: 'text-xs',
        icon: 'text-xl',
        iconContainer: 'w-10 h-10'
      };
  }
};

const sizeClasses = getSizeClasses(size);

// 生成渐变背景样式
const getBackgroundStyle = () => {
  if (gradient) {
    return `background: linear-gradient(135deg, ${gradient.from}, ${gradient.to})`;
  }
  return `background: linear-gradient(135deg, ${color}15, ${color}25)`;
};

// 生成图标容器样式
const getIconStyle = () => {
  return `background-color: ${color}20; color: ${color}`;
};
---

<div 
  class="rounded-lg border border-black/10 dark:border-white/10 hover:shadow-lg transition-all duration-300 group cursor-pointer"
  style={getBackgroundStyle()}
>
  <div class={sizeClasses.container}>
    <!-- 顶部：图标和趋势 -->
    <div class="flex items-start justify-between mb-3">
      <!-- 图标 -->
      {icon && (
        <div 
          class={`rounded-lg flex items-center justify-center ${sizeClasses.iconContainer}`}
          style={getIconStyle()}
        >
          <iconify-icon icon={icon} class={sizeClasses.icon}></iconify-icon>
        </div>
      )}
      
      <!-- 趋势指示器 -->
      {trend && (
        <div class={`flex items-center gap-1 ${trend.isPositive ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
          <iconify-icon 
            icon={trend.isPositive ? 'material-symbols:trending-up' : 'material-symbols:trending-down'} 
            class="text-sm"
          ></iconify-icon>
          <span class="text-xs font-medium">
            {trend.isPositive ? '+' : ''}{trend.value}%
          </span>
        </div>
      )}
    </div>
    
    <!-- 主要数值 -->
    <div class={`font-bold mb-1 ${sizeClasses.value}`} style={`color: ${color}`}>
      {value}
    </div>
    
    <!-- 标题 -->
    <div class={`font-medium text-black/70 dark:text-white/70 mb-1 ${sizeClasses.title}`}>
      {title}
    </div>
    
    <!-- 副标题 -->
    {subtitle && (
      <div class={`text-black/60 dark:text-white/60 ${sizeClasses.subtitle}`}>
        {subtitle}
      </div>
    )}
    
    <!-- 趋势标签 -->
    {trend && trend.label && (
      <div class={`text-black/50 dark:text-white/50 mt-1 ${sizeClasses.subtitle}`}>
        {trend.label}
      </div>
    )}
    
    <!-- 链接 -->
    {link && (
      <div class="mt-3">
        <a 
          href={link.url}
          class={`text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors ${sizeClasses.subtitle}`}
        >
          {link.text} →
        </a>
      </div>
    )}
  </div>
  
  <!-- 悬停效果 -->
  <div class="absolute inset-0 bg-white/5 dark:bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg pointer-events-none"></div>
</div>

<script>
  // 加载 Iconify 图标库
  if (typeof window !== 'undefined' && !window.iconifyLoaded) {
    const script = document.createElement('script');
    script.src = 'https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js';
    document.head.appendChild(script);
    window.iconifyLoaded = true;
  }
</script>

<style>
  .group {
    position: relative;
  }
</style>